import React from 'react'
import Banner from '../components/Banner'
import Navigator from '../components/Navigator'
import Info from '../components/Info'
import order from '../styles/Order.module.scss'
import Copyright from '../components/Copyright'
import Kefu from '../components/Kefu'

function PcOrderList() {
  return (
    <>
      {/* 顶部banner */}
      <Banner />
      {/* 顶部导航 */}
      <Navigator />
      <div className="container">
        <Info />
        {/* 没有订单 */}
        <p className={order.noOrder}>当前账号下无历史订单记录。</p>
        <div className={order.orderList}>
          <div className={order.orderHd}>
            <span>购买角色</span>
            <span>实付金额</span>
            <span>订单状态</span>
            <span>操作提示</span>
          </div>
          <div className={order.orderItem}>
            <span>角色名称</span>
            <span>RMB 1500.00</span>
            <span>待支付</span>
            <span>
              <a href="javascript:;">提醒发货</a>
            </span>
          </div>
          <div className={order.orderItem}>
            <span>角色名称</span>
            <span>RMB 1500.00</span>
            <span>待支付</span>
            <span>
              <a href="javascript:;">提醒发货</a>
              <span>/</span>
              <a href="javascript:;">取消支付</a>
            </span>
          </div>
        </div>
      </div>
      <div className={order.warn}>
        搜索仅限于最近的50条订单记录。如果您对之前的订单有任何疑问，或者遇到游戏充值支付问题，
        <br />
        请联系客服，获取详细帮助。
      </div>
      <Kefu />
      <Copyright />
    </>
  )
}

export default PcOrderList
